<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"
	contentType="text/html;charset=UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>美图随心看</title>
<meta name="referrer" content="no-referrer" />
<meta name="referrer" content="same-origin">
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />

		<!--[if lt IE 9]>
		<script src="${ctx}/js/jquery-1.11.1.min.js"></script>
		<![endif]-->
		<!--[if gte IE 9]><!-->
		<script src="${ctx}/js/jquery-2.0.3.min.js"></script>
		<!--<![endif]-->

<script type="text/javascript" src="${ctx}/layer/layer.js"></script>
<%@ include file="securty.jsp" %>
<script type='text/javascript'>


var go=function(url){
	window.location.href=url;
} ;

var prev=function(){
		var href=$(".image-pre").parent().attr("href");
		if(href != "${ctx}/meizi/") 	go(href);
	} ;
var next=function(){
		var href=$(".image-next").parent().attr("href");
		if(href != "${ctx}/meizi/") 	go(href);
	} ;

function a(){
  window.opener = null;
   window.close();
}  
<c:if test="${empty meizi}" >	alert('没有妹子啦~!!');a();	</c:if>
</script>
 
</head>

<body>

<div>
	<table width="" cellpadding="0" cellspacing="0" border="0" align="center">
		<tr>
			<td><h1><a href="${ctx}">美图随心看</a></a></h1></td>
		</tr>
	</table>
</div>
 
<div>
	<table width="" cellpadding="0" cellspacing="0" border="0" align="center">
		<tr>
			<td style="vertical-align:middle;">
				<div class='img-data'>
					<a href="${ctx}/meizi/${preMeizi.md5}" class='img-left'><img src="${preMeizi.big}" class='image image-pre'  style='max-height:100px; max-width:100px;'  referrerpolicy="no-referrer" /></a>&nbsp;
					<img src="${meizi.big}" class='image'  style='max-height:700px; max-width:700px;' referrerpolicy="no-referrer" />&nbsp;
					<a href="${ctx}/meizi/${nextMeizi.md5}" class='img-right'><img src="${nextMeizi.big}" class='image image-next'  style='max-height:100px; max-width:100px;' referrerpolicy="no-referrer" /></a>
				</div>
			</td>
		</tr>	
		<tr>
			<td align="center">
				<div >
				<div style='border-bottom:1px solid;padding:6px;'>抓取时间:&nbsp;${meizi.createdate}</div>
				<div style='padding:4px;'>
					<table cellpadding="0" cellspacing="0" border="0" align="center">
						<tr align="center">
									<td rowspan=2>&nbsp;自动播放: &nbsp;</td>
									<td align="center">&nbsp;<input type='radio' name='auto.play' class='auto-play left' data-play='left' />&nbsp;</td>
									<td align="center">&nbsp;<input type='radio' name='auto.play' class='auto-play pause t' data-play='pause' />&nbsp;</td>
									<td align="center">&nbsp;<input type='radio' name='auto.play' class='auto-play right' data-play='right' />&nbsp;</td>
									<td rowspan=2>&nbsp;<input id='ts' value='${ts}' type='text'  style='text-align:center;width:16px;border:0px;border-bottom:1px solid;' /> &nbsp;</td>
						</tr>	
						<tr align="center"> 
							<td>&lt;-</td><td>=</td><td>-&gt;</td>
						</tr>	
					</table> 
				</div>
				</div>
			</td>
		</tr>	
		<tr>
			<td align="left"><a href="javascript:void(0)" onclick="a()" tilte='支持方向键' >关闭</a></td>
		</tr>
	</table>
</div>
<br /> 
<div style='text-align: center'>
<a href="javascript:void(0)" class='del' data-md5="${meizi.md5 }" >删除</a>
<script type='text/javascript'>

var autoPlayer={
	'item': { 
			'left':  { 'a': $("a.img-left",this.p)  , 'img':$("a.img-left>img" ,this.p) },
			'right': { 'a': $("a.img-right",this.p) , 'img':$("a.img-right>img",this.p) }	
		} ,
	'ts':function(){ var ts=$("#ts").val()||3;if(isNaN(ts)){ts=3;} ts=ts<3?3:ts; return ts; }, 
	'p':function(){return "div.img-data" },
	'isPlaying':false  , 
	'getStatus':function(){ return this.isPlaying } ,
	'getitem' :function(id,ims) {return this.item[id][ims] } ,
	'turn':function(ct){ var a=this.getitem(ct,'a'); a.attr({'href': a.attr('href')+"?t="+ct+"&ts="+this.ts()})} ,
	'start':function(){this.isPlaying=true;} ,
	'pause':function(){this.isPlaying=false;} ,
	't': function(){ return this.pause();} ,
	'left':function(){ this.turn('left'); this.getitem('left','img').click();} ,
	'right':function(){this.turn('right'); this.getitem('right','img').click();} ,
	'play':function(pc){
			if("pause"==pc){this.pause(); }
			if("left"==pc){this.start();this.left();}
			if("right"==pc){this.start();this.right();}
	 }
	};
  
$(document).ready(function() { 
 	  var pause=function(){
 			autoPlayer.play('pause');
 			$("input[name='auto.play'].auto-play.pause").attr("checked",'checked');
 			
 		} ;
  
	var del=function(md5,callback){
		var url="${ctx}/meizi/del";
		$.post(url,{md5:md5},function(dt){
			if(dt.retcode==0){  callback.call(); }
			else{ layer.alert(dt.retmsg, {icon: 6}); }
		});
	}
	
	$("input[type='radio'].auto-play").click(function(){
			 var playcontrol=$(this).data('play');
			 //alert(playcontrol); 
			 autoPlayer.play(playcontrol)
	});
	
	$(".del").click(function(){
		var md5=$(this).data("md5");
		layer.confirm('真要删除啊？', {
		  btn: ['是的','再想一想'] //按钮
		}, function(){
                        del(md5,function(){prev();}); 
		   	return true;
		}, function(){
		   return true;
		});
	});

	
		$(document).keydown(function(event) {
				 ////console.log(event.keyCode);
	        switch (event.keyCode) {
	            case 32: //   space 
	                pause();
	                break;
	            case 37: // Flèche gauche
	              setTimeout( function(){  prev(); },1000) ;
	                break;
	            case 39: // Flèche droite
	              setTimeout( function(){  next(); },1000) ; 
	                break;
	        }
		}); 
	
	if( !isLogin){ $(".del").hide();	} 
	
	$("input[name='auto.play'].auto-play.${t}").attr("checked",'checked');
	
  if("${t}"=="t"){ autoPlayer.pause(); } else { autoPlayer.start(); }
   
  setTimeout(function(){ if(autoPlayer.getStatus()) autoPlayer.${t}() ; },autoPlayer.ts()*1000); 
 
});

</script>
</div>
<br />

	

</body>
</html>
